<template>
    <div class="editAboutMyMatch">
        <div class="moduleHead">
            <span class="center">
                <router-link :to="{ name: 'me' }">
                    <span class="back"></span>
            </router-link>
            <span>  {{language.unify_aboutMyMatch}} </span>
            </span>
            <span :class="submitStatus ? 'right rightActive' : 'right'" @click="updateAboutMyMatch">{{language.unify_done}}</span>
        </div>
        <div class="body">
            <textarea class="editTextarea" :placeholder="language.editProfile_aboutMatchTip" spellcheck="false" autocapitalize="off" @input="validationAboutMyMatch" @blur="validationAboutMyMatch" @focus="validationAboutMyMatch" v-model="aboutMyMatch"></textarea>
        </div>
        <loading :props="{type:'page' ,show:ajaxBool}"></loading>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import loading from './Loading'
import publicDialog from './PublicDialog'

export default {

    name: 'editAboutMyMatch',

    components: {
        loading,
        publicDialog
    },

    data: function() {
        return {
            aboutMyMatch: '',
            submitStatus: false,
            ajaxBool: false,
            dialogData: {}
        }
    },

    activated: function() {
        this.aboutMyMatch = this.userInfo.about.about_my_match;
    },

    computed: {
        userInfo() {
            return this.$store.state.user.userInfo;
        }
    },

    methods: {
        validationAboutMyMatch: function(e) {
            let tthis = this,
                val = _.trim(e.target.value);
            if (val.length < 10 || val == _.trim(tthis.userInfo.about.about_my_match)) {
                tthis.submitStatus = false;
            } else {
                tthis.submitStatus = true;
            }
        },
        updateAboutMyMatch: function(e) {
            let tthis = this,
                userInfo = Unit.getObjSessionStorage("ms_myself") || {};

            if (!tthis.submitStatus) {
                return false
            } else {
                var obj = {
                    data: {
                        match_about: tthis.aboutMyMatch,
                    },
                    processData: function(result) {
                        if (result.errs) {
                            tthis.dialogData = {
                                position: 'top',
                                type: 'error',
                                content: {
                                    info: result.errs[0].errmsg,
                                }
                            };
                            return;
                        } else {
                            userInfo.about.about_my_match = result.data.match_about;
                            return userInfo;
                        }
                    },
                    complete: function() {
                        tthis.submitStatus = false;
                        tthis.ajaxBool = false;
                        tthis.$router.push({ 'name': 'me' });
                    }
                }
                this.ajaxBool = true;
                this.$store.dispatch('user_updateProfile', obj);
            }
        },

    }
}

</script>
<style scoped>
.editAboutMyMatch {
    background: #fff;
    padding: 44px 0 51px 0;
}

.editTextarea {
    margin: 15px 10px 10px 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    font-family: Helvetica, Tahoma, Arial;
    font-size: 13px;
    resize: none;
    min-height: 150px;
    line-height: 20px;
}

</style>
